import QtQuick 2.0
import QtQuick.Controls 2.5

Item {
    id:root
    width: 1000
    height: 480
    property int duration: 400

    // 记录播放的视频是第几个,初始化为1
    property int playNum: 1


    Image {
        id:ball1
        width: 300
        height: 300
        opacity:1
        x:0
        y:100
        source: "hep.png"

    }

    Image {
        id:ball2
        width: 200
        height: 200
        opacity:0
        x:0
        y:200
        source: "hep.png"
        visible:  false

    }


    //第一个按钮
    Button {
        id:mbutton1
        width: 20
        height: 20

        x:400
        y:0

        MouseArea {
            anchors.fill: parent
            //点击后初始化
            onClicked: {
                if (playNum > 1) {
                    //播放从后往前选择
                    forwardAnimation()
                } else {
                    //不动
                }

                playNum = 1
            }
        }
    }

    //第二个按钮
    Button {
        id:mbutton2
        width: 20
        height: 20

        x:400
        y:40

        MouseArea {
            anchors.fill: parent
            //点击后初始化
            onClicked: {
                if (playNum < 2) {
                    backAnimation()
                } else if (playNum > 2){
                    forwardAnimation()
                }

                playNum = 2
            }
        }
    }

    //第三个按钮
    Button {
        id:mbutton3
        width: 20
        height: 20

        x:400
        y:80

        MouseArea {
            anchors.fill: parent
            //点击后初始化
            onClicked: {
                if (playNum < 3) {
                    backAnimation()
                } else if (playNum > 3){
                    forwardAnimation()
                }

                playNum = 3
            }
        }
    }

    //第四个按钮
    Button {
        id:mbutton4
        width: 20
        height: 20

        x:400
        y:120

        MouseArea {
            anchors.fill: parent
            //点击后初始化
            onClicked: {
                if (playNum < 4) {
                    backAnimation()
                } else if (playNum > 4){
                    forwardAnimation()
                }

                playNum = 4
            }
        }
    }

    //第五个按钮
    Button {
        id:mbutton5
        width: 20
        height: 20

        x:400
        y:160

        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (playNum < 5) {
                    backAnimation()
                } else {
                    //不动
                }

                playNum = 5

            }
        }
    }

    function backAnimation() {
        //方块1
        ball1.opacity = 1;
        ball1.x = 0;
        ball1.y = 100;
        ball1.width = 300
        ball1.height = 300
        ball1.rotation = 0;

        //方块2
        ball2.opacity = 0;
        ball2.x = 0;
        ball2.y = 200;
        ball2.width = 200
        ball2.height = 200
        ball2.rotation = 0;
        animBack1.restart()
        animBack2.restart()
    }

    function forwardAnimation() {

        //方块1,下移展示
        ball1.opacity = 0;
        ball1.x = 0;
        ball1.y = 20;
        ball1.width = 200
        ball1.height = 200
        ball1.rotation = 0;

        //方块2，下移消失
        ball2.opacity = 1;
        ball2.x = 0;
        ball2.y = 100;
        ball2.width = 300
        ball2.height = 300
        ball2.rotation = 0;

        animforward1.restart()
        animforward2.restart()
    }

    //向后播放视频动画1
    ParallelAnimation {
        id: animBack1

        //控制y轴移动
        NumberAnimation {
            target: ball1
            properties: "y"
            to: 20
            duration: root.duration * 0.4
        }

        //调整宽度
        NumberAnimation {
            target: ball1
            properties: "width"
            to: 200
            duration: root.duration * 0.4
        }

        //调整高度
        NumberAnimation {
            target: ball1
            properties: "height"
            to: 200
            duration: root.duration * 0.4
        }

        //调整透明度
        NumberAnimation {
            target: ball1
            properties: "opacity"
            to: 0
            duration: root.duration * 0.4

        }
    }


    //向后播放视频动画2
    ParallelAnimation {
        id: animBack2

        //控制y轴移动
        NumberAnimation {
            target: ball2
            properties: "y"
            to: 50
            duration: root.duration * 0.4
        }

        //调整宽度
        NumberAnimation {
            target: ball2
            properties: "width"
            to: 300
            duration: root.duration * 0.4
        }

        //调整高度
        NumberAnimation {
            target: ball2
            properties: "height"
            to: 300
            duration: root.duration * 0.4
        }

        //调整透明度
        NumberAnimation {
            target: ball2
            properties: "opacity"
            to: 1
            duration: root.duration * 0.4

        }

        onStarted: {
            console.log("开始，显示" )
            ball2.visible = true

        }
    }

    //向前播放视频动画1
    ParallelAnimation {
        id: animforward1

        //控制y轴移动
        NumberAnimation {
            target: ball1
            properties: "y"
            to: 100
            duration: root.duration * 0.4
        }

        //调整宽度
        NumberAnimation {
            target: ball1
            properties: "width"
            to: 300
            duration: root.duration * 0.4
        }

        //调整高度
        NumberAnimation {
            target: ball1
            properties: "height"
            to: 300
            duration: root.duration * 0.4
        }

        //调整透明度
        NumberAnimation {
            target: ball1
            properties: "opacity"
            to: 1
            duration: root.duration * 0.4

        }
    }


    //向前播放视频动画2
    ParallelAnimation {
        id: animforward2

        //控制y轴移动
        NumberAnimation {
            target: ball2
            properties: "y"
            to: 300
            duration: root.duration * 0.4
        }

        //调整宽度
        NumberAnimation {
            target: ball2
            properties: "width"
            to: 200
            duration: root.duration * 0.4
        }

        //调整高度
        NumberAnimation {
            target: ball2
            properties: "height"
            to: 200
            duration: root.duration * 0.4
        }

        //调整透明度
        NumberAnimation {
            target: ball2
            properties: "opacity"
            to: 0
            duration: root.duration * 0.4

        }

        onStarted: {
            console.log("开始，显示" )
            ball2.visible = true

        }
    }
}
